<template>
	<view class="apply-detail">
		<view class="row-between detail-item">
			<view class="bold">
				申请人
			</view>
			<view>
				{{applyInfo.realname}}
			</view>
		</view>
		
		<view class="row-between detail-item mt10">
			<view class="bold">
				申请部门
			</view>
			<view>
				{{applyInfo.bumen}}
			</view>
		</view>
		
		<view class="row-between detail-item mt10">
			<view class="bold">
				申请类型
			</view>
			<view>
				{{type_status[applyInfo.type]}}
			</view>
		</view>
		
		<view class="row-between detail-item mt10">
			<view class="bold">
				配送日期
			</view>
			<view>
				{{applyInfo.deliver_date}}
			</view>
		</view>
		
		<view class="row-between detail-item mt10">
			<view class="bold">
				{{applyInfo.pid != '' ? '实际金额' : '申请金额'}}
			</view>
			<view class="detail-price bold">
				￥{{applyInfo.amount}}
			</view>
		</view>
		
		<view class="detail-item mt10">
			<view class="bold">
				申请内容
			</view>
			<view class="mt10 muted">
				{{applyInfo.content}}
			</view>
		</view>
		
		<!-- 申请详单 -->
		<view class="bg-white mt20 detail-item">
			<view>
				<text class="required-color">*</text>
				<text class="ml10 bold">申请详单</text>
			</view>
			
			<view class="mt20 review-list">
				<view class="row-between review-item title">
					<view class="detail-item-child-one">
						
					</view>
					<view class="detail-item-child">
						物品名称
					</view>
					<view class="detail-item-child">
						商品材质
					</view>
					<view class="detail-item-child">
						规格型号
					</view>
					<view class="detail-item-child">
						单位
					</view>
					<view class="detail-item-child">
						数量
					</view>
					<view class="detail-item-child">
						预估单价
					</view>
					<view class="detail-item-child">
						预估总价
					</view>
				</view>
				<view class="row-between review-item content" v-for="(item, index) in reviewItem" v-key="index">
					<view class="detail-item-child-one order-number">
						{{index + 1}}
					</view>
					<view class="row detail-item-child">
						<text class="line1">
							{{item.name}}
						</text>
					</view>
					<view class="detail-item-child">
						<text class="line1">
							{{item.material}}
						</text>
					</view>
					<view class="detail-item-child">
						<text class="line1">
							{{item.specifications}}
						</text>
					</view>
					<view class="detail-item-child">
						<text class="line1">
							{{item.unit}}
						</text>
					</view>
					<view class="detail-item-child">
						<text class="line1">
							{{item.number}}
						</text>
					</view>
					<view class="detail-item-child">
						<text class="line1">
							{{item.unit_price}}
						</text>
					</view>
					<view class="detail-item-child">
						<text class="line1">
							{{item.total_price}}
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="detail-item mt10">
			<view class="bold">
				图片
			</view>
			<view class="row wrap mt20">
				<view class="detail-image" v-for="(item, index) in applyInfo.images_arr" :key="index" @click="imgListPreview(index)">
					<u-image width="120rpx" height="120rpx" :src="applyInfo.images_domain + item"></u-image>
				</view>
			</view>
		</view>
		
		<view class="row-between mt10 detail-item">
			<view class="bold">
				申请日期
			</view>
			<view>
				{{applyInfo.createtime}}
			</view>
		</view>
		
		<view class="detail-item mt10">
			<view>
				<text class="required-color">*</text>
				<text class="ml10 bold">审批意见</text>
			</view>
			<view class="mt10 muted">
				<!-- 是审核人，并且没有审核过 -->
				<view v-if="isApproval && !isReviewed">
					<u-input v-model="approvalOpinions" :height="textareaHeight" placeholder="如不通过，请输入审批意见" :type="textareaType" :border="border" :auto-height="autoHeight" />
				</view>
				<view v-else>
					{{approvalOpinions}}
				</view>
			</view>
		</view>
		
		<view class="detail-item mt10" v-if="!isApproval || isReviewed">
			<view class="bold">
				审批流程
			</view>
			<view class="mt10 muted" >
				<view class="row approval-list" v-for="(item, index) in reviewRenList" :key="index">
					<view class="xxs column-center" style="width: 150rpx;">
						{{item.audit_time == null ? '待审核' : item.audit_time}}
					</view>
					<view class="mr10" :class="index < (reviewRenList.length - 1) ? 'approval-icon' : ''">
						<u-image width="40rpx" height="40rpx" shape="circle" src="../../static/icon/apply-approval-icon.png" v-if="item.state == 0"></u-image>
						<u-image width="40rpx" height="40rpx" shape="circle" src="../../static/icon/apply-passed-icon.png" v-if="item.state == 1"></u-image>
						<u-image width="40rpx" height="40rpx" shape="circle" src="../../static/icon/apply-rejected-icon.png" v-if="item.state == 2"></u-image>
					</view>
					<view class="row">
						<view class="">
							{{item.realname}}
						</view>
						<view class="ml20 xs" :class="item.state == 2 ? 'state-red' : 'state-green'">
							<block v-if="item.state == 1">已审批</block>
							<block v-else-if="item.state == 2">已拒绝</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn white">
			<view class="row-between" v-if="isApproval && !isReviewed">
				<view class="submit-item" @click="approveButton" data-index="2">
					<view class="submit-no column-center">
						不通过
					</view>
				</view>
				<view class="submit-item" @click="approveButton" data-index="1">
					<view class="submit-yes column-center">
						通过
					</view>
				</view>
			</view>
			<view class="submit-btn-content row-center" v-if="!isApproval && applyInfo.status == 2" @click="reapplyFunc">
				重新申请
			</view>
			<view class="submit-btn-content row-center" v-if="!isApproval && applyInfo.status == 1" @click="reviewItemFunc">
				最终申报
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				imageList: 20,
				approvalOpinions: '',
				isApproval: false, // 是否是审核人
				isReviewed: false, // 如果是审核人，是否已经审核 false未审核 true已经审核
				
				textareaType: 'textarea',
				textareaHeight: 100,
				autoHeight: true,
				border: false,
				reviewRenList: [],
				applyInfo: '',
				reviewItem: '',
				state: 0,
				userInfo: {},
				type_status: {
					1: '秦隆办公',
					2: '秦隆后勤',
					3: '非秦隆办公',
					4: '非秦隆后勤',
				},
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.userInfo = uni.getStorageSync('userinfo');
			this.getDetailFun();
		},
		methods: {
			getDetailFun: function() {
				let _this = this;
				let post_params = {
					review_id: this.id,
				};
				this.$u.post('/api/review/userReviewDetail', post_params).then(res => {
					_this.isApproval = res.ifautiod == 1 ? true : false;
					_this.reviewRenList = res.review_ren_list;
					_this.applyInfo = res.review_info;
					_this.reviewItem = res.review_item;
					
					res.review_ren_list.forEach(function(item, index) {
						if(item.user_id == _this.userInfo.id && res.ifautiod == 1 && item.state != 0) {
							_this.isReviewed = true;
							_this.approvalOpinions = item.refused_content;
						} else if(item.state != 0) {
							_this.approvalOpinions = item.refused_content;
						}
					})
				});
			},
			//预览图片
			imgListPreview(index){
				let _this = this;
				let urlList = _this.applyInfo.images_arr;
				let newUrlList = [];
				urlList.forEach(function(item, index){
					newUrlList.push(_this.applyInfo.images_domain + item);
				});
				
				uni.previewImage({
					urls: newUrlList,
					current: index
				})
			},
			// 审批意见
			approveButton: function(e) {
				let _this = this;
				let _approvalOpinions = this.approvalOpinions;
				let _type = e.currentTarget.dataset.index;
				
				if(_type == 2) {
					if(_approvalOpinions == '') {
						uni.showToast({
							title: '审批意见不能为空',
							icon: "none"
						})
						return false;
					}
				}
				
				uni.setStorageSync('refresh_apply_list', 'refresh')
				_this.state = _type;
				_this.postReview();
			},
			
			postReview: function() {
				let post_params = {
					review_id: this.id,
					state: this.state,
					idear: this.approvalOpinions,
				};
				this.$u.post('/api/review/ReviewrenAudit', post_params).then(res => {
					uni.navigateBack({
						delta: 1
					})
				});
			},
			// 重新审核
			reapplyFunc() {
				uni.navigateTo({
					url: '/pages/finance/apply?id='+ this.id
				})
			},
			reviewItemFunc() {
				uni.navigateTo({
					url: '/pages/finance/apply?source=review&id='+ this.id
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
	.apply-detail {
		padding-bottom: 60rpx;
		
		.state-red {
			color: #E31414;
		}
		
		.state-green {
			color: #2DD217;
		}
		
		.detail-item {
			padding: 20rpx 30rpx;
			background-color: $-color-white;
			
			.detail-price {
				color: #E31414;
			}
			
			.review-list {
				overflow-y: hidden;
				
				.review-item {
					height: 60rpx;
					white-space: nowrap;
					width: 1400rpx;
					
					&.title {
						background-color: #DCDCDC;
					}
					
					&.content {
						border-bottom: 2rpx solid #DCDCDC;
					}
					
					.detail-item-child-one {
						width: 8%;
						height: 100%;
						background-color: #DCDCDC;
						
						&.order-number {
							text-align: center;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #EAEAEA;
						}
					}
					
					.detail-item-child {
						padding: 0 20rpx;
						height: 100%;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						width: 400rpx;
						
						// 除了最后一个元素的元素增加伪元素
						&:not(:last-child)::after {
							content: "";
							position: absolute;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto 0;
							width: 2rpx;
							height: 30rpx;
							background-color: #CDCDCD;
						}
						
					}
				}
			}
			
			.detail-image {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				
				&:nth-child(5n) {
					margin-right: 0;
				}
			}
			
			.approval-list {
				padding: 30rpx;
				
				.approval-icon {
					position: relative;
					
					&:after {
						position: absolute;
						content: "";
						width: 2rpx;
						height: 75rpx;
						background-color: #D0D0D0;
						left: 0;
						right: 0;
						top: 38rpx;
						margin: 0 auto;
						z-index: 0;
					}
					
					.u-image {
						z-index: 1;
					}
				}
			}
		}
		
		.submit-btn {
			margin: 30rpx;
			.submit-btn-content {
				width: 100%;
				padding: 20rpx;
				background-color: #2045fc;
				border-radius: 50rpx;
			}
			
			.submit-item {
				width: 50%;
				padding: 20rpx;
				font-size: 34rpx;
				
				.submit-no,
				.submit-yes{
					width: 100%;
					padding: 15rpx 0;
					border-radius: 50rpx;
					background-color: #2045fc;
				}
				
				.submit-no {
					background-color: #E89C38;
				}
			}
			
		}
	}
</style>

<style>
	
	
</style>
